<template>
    <div class="gouwuche-detail" v-loading="loading" ref="print">
        <el-page-header @back="goBack" content="详情页面"></el-page-header>
        <div class="admin-detail">
            <div class="detail detail-readmodule">
                <div class="detail-title">商品信息id：</div>
                <div class="detail-content">{{ map.shangpinxinxiid }}</div>
            </div>
            <div class="detail detail-text">
                <div class="detail-title">商品编号：</div>
                <div class="detail-content">{{ map.shangpinbianhao }}</div>
            </div>
            <div class="detail detail-select">
                <div class="detail-title">游戏分类：</div>
                <div class="detail-content">
                    <e-select-view module="youxifenlei" :value="map.youxifenlei" select="id" show="fenleimingcheng"></e-select-view>
                </div>
            </div>
            <div class="detail detail-select">
                <div class="detail-title">所属游戏：</div>
                <div class="detail-content">
                    <e-select-view module="youxixinxi" :value="map.suoshuyouxi" select="id" show="youximingcheng"></e-select-view>
                </div>
            </div>
            <div class="detail detail-select">
                <div class="detail-title">道具类型：</div>
                <div class="detail-content">{{ map.daojuleixing }}</div>
            </div>
            <div class="detail detail-longtext">
                <div class="detail-title">商品名称：</div>
                <div class="detail-content">{{ map.shangpinmingcheng }}</div>
            </div>
            <div class="detail detail-image">
                <div class="detail-title">图片：</div>
                <div class="detail-content">
                    <e-img :src="map.tupian" style="max-width: 120px" />
                </div>
            </div>
            <div class="detail detail-money">
                <div class="detail-title">价格：</div>
                <div class="detail-content">{{ map.jiage }}</div>
            </div>
            <div class="detail detail-number">
                <div class="detail-title">购买数量：</div>
                <div class="detail-content">{{ map.goumaishuliang }}</div>
            </div>
            <div class="detail detail-number">
                <div class="detail-title">小计：</div>
                <div class="detail-content">{{ map.xiaoji }}</div>
            </div>
            <div class="detail detail-textuser">
                <div class="detail-title">购买人：</div>
                <div class="detail-content">{{ map.goumairen }}</div>
            </div>
        </div>
        <div class="mt10">
            <el-button type="default" class="hidePrint" @click="$router.go(-1)"> 返回 </el-button>
            <el-button type="success" class="hidePrint" @click="$print"> 打印本页 </el-button>
        </div>
    </div>
</template>
<style type="text/scss" scoped lang="scss">
    .gouwuche-detail {
        .admin-detail {
            display: flex;
            flex-wrap: wrap;
            margin-top: 30px;
            .detail {
                width: 50%;
                padding: 5px;
                display: flex;
                margin-bottom: 10px;
                border-bottom: 1px solid #DEDEDE;
                .detail-title {
                    width: 120px;
                    text-align: right;
                    flex-shrink: 0;
                }
                .detail-content {
                    flex-grow: 1;
                }
            }
            .detail.detail-images {
                width: 100%;
                flex-wrap: wrap;
                .detail-title {
                    display: none;
                }

                .detail-content {
                    width: 100%;
                    padding: 10px;
                }
            }
            .detail.detail-editor,
            .detail.detail-dataset {
                width: 100%;
                flex-wrap: wrap;
                .detail-title {
                    width: 100%;
                    padding: 10px;
                    margin-top: 10px;
                    background: #9a0606;
                    color: #ffffff;
                    text-align: left;
                }
                .detail-content {
                    padding: 10px;
                }
            }
        }
    }
</style>
<script>
    import api from "@/api";
    import { extend } from "@/utils/extend";

    export default {
        data() {
            return {
                loading: false,
                map: {},
            };
        },
        props: {
            id: {
                type: [String, Number],
                required: true,
            },
        },
        watch: {
            id: {
                handler() {
                    this.loadDetail();
                },
                immediate: true,
            },
        },
        computed: {},
        methods: {
            goBack() {
                this.$router.go(-1);
            },
            loadDetail() {
                if (this.loading) return;
                this.loading = true;
                this.$get(api.gouwuche.detail, {
                    id: this.id,
                })
                    .then((res) => {
                        this.loading = false;
                        if (res.code == api.code.OK) {
                            extend(this, res.data);
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.error(err.message);
                    });
            },
        },
        created() {},
        mounted() {},
        destroyed() {},
    };
</script>
